// tsx ： jsx->tsx
// 父组件 会向 子组件 提供 props 输出
// 子组件 需求类型限定 prop-types
// 面向对象中 父子组件之间约定 interface接口
import * as React from 'react'
// 定义一个接口,父子组件间用
// 子组件需要实现 props 规定的接口属性和方法
// ts 语法能力 面向对象的能力更nb
// ts 可以 类 java

// 接口 和 组件 结合
// 组件要实现接口
interface Props {
    // 接口定义区域
    userName: string;
    userAge: number;
}
// props 默认 空对象{ }
// 泛型: React.FC<(interface)> 的 <> 由 @types/react 提供
const HelloComponents: React.FC<Props> = (props) => {
    return (
        <h2>
            hello user:{props.userName}!
            <br />
            age:{props.userAge}
        </h2>
    )
}

export default HelloComponents